<template>
  <el-row :gutter="10">
    <el-col :span="4">
      <el-card shadow="never" class="h-[80vh]" style="overflow: auto">
        <div class="rect-printElement-types hiprintEpContainer"></div>
      </el-card>
    </el-col>
    <el-col :span="16">
      <el-card
        shadow="never"
        style="overflow: hidden; overflow-x: auto; overflow-y: auto"
      >
        <div id="hiprint-printTemplate" class="hiprint-printTemplate"></div>
      </el-card>
    </el-col>
    <el-col :span="4" class="params_setting_container">
      <el-card
        shadow="never"
        class="hinnn-layout-sider h-[80vh]"
        style="overflow: auto"
      >
        <div id="PrintElementOptionSetting"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
import { ElMessage } from "element-plus";
import { modeDesign } from "../data.js";
import template from "./template";
import { getElement ,billDetail} from "../api/index.js";
const route = useRoute();
const getElementData = async () => {
  try {
    let { data } = await getElement();
    return data;
  } catch (error) {
    console.log(error);
  }
};
const props = defineProps({
  mode: {
    type: String,
    default: "",
  },
});
const { mode } = toRefs(props);
const provider = ref();
const emits = defineEmits(["changePage"]);
// 初始化 provider
onMounted(() => {
  init();
});
watch(
  () => mode.value,
  (val) => {
    if (!val) return;
    init();
  }
);
let hiprintTemplate;
const init = async () => {
  const {type,id} = route.query;
  let data = await getElementData();
  const res = await billDetail(type,{id})
  provider.value = modeDesign.find((item) => item.value === mode.value);
  hiprint.init({
    providers: [provider.value.f(data)],
  });

  nextTick(() => {
    buildDesigner(res?.data?.bill_json||'');
    buildLeftElement();
    emits("changePage", true);
  });
};
const buildLeftElement = () => {
  $(".hiprintEpContainer").empty();
  hiprint.PrintElementTypeManager.build(
    ".hiprintEpContainer",
    provider.value.value
  );
};

const buildDesigner = (data) => {
  $("#hiprint-printTemplate").empty();
  hiprintTemplate = new hiprint.PrintTemplate({
    template: data||template,
    dataMode: 1,
    history: false,
    settingContainer: "#PrintElementOptionSetting",
    paginationContainer: ".hiprint-printPagination",
  });
  hiprintTemplate.design("#hiprint-printTemplate", { grid: true });
};
const setPageSize = (val) => {
  try {
    hiprintTemplate.setPaper(val.width, val.height);
  } catch (error) {
    ElMessage.error(`操作失败: ${error}`);
  }
};
const setZoom = (val) => {
  try {
    hiprintTemplate.zoom(val, true);
  } catch (error) {
    ElMessage.error(`操作失败: ${error}`);
  }
};
const setClear = () => {
  try {
    hiprintTemplate.clear();
  } catch (error) {
    ElMessage.error(`操作失败: ${error}`);
  }
};
const getHiprintTemplate = () => {
  return hiprintTemplate;
};
defineExpose({
  init,
  setPageSize,
  setZoom,
  setClear,
  getHiprintTemplate,
});
</script>
<style lang="scss" scoped>
// 修改 页眉/页脚线 样式
:deep(.hiprint-headerLine),
:deep(.hiprint-footerLine) {
  border-color: red !important;
}

:deep(.hiprint-headerLine:hover),
:deep(.hiprint-footerLine:hover) {
  border-top: 3px dashed red !important;
}

:deep(.hiprint-headerLine:hover:before) {
  content: "页眉线";
  left: calc(50% - 18px);
  position: relative;
  background: #ffff;
  top: -12px;
  color: red;
  font-size: 12px;
}

:deep(.hiprint-footerLine:hover:before) {
  content: "页脚线";
  left: calc(50% - 18px);
  position: relative;
  color: red;
  background: #ffff;
  top: -12px;
  font-size: 12px;
}
:deep(.hiprint_rul_wrapper) {
  .h_img,
  .v_img {
    max-width: none;
  }
}
:deep(.hiprint-printElement-type > li > ul > li > a) {
  padding: 4px 4px;
  color: #1296db;
  line-height: 1;
  height: 40px;
  text-overflow: ellipsis;
}
</style>
